<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content="mock,Mock,在线mock服务,前后端分离,在线mock,在线接口Mock平台"/>
    <meta name="description" content="Bluewind Mock 是一个可视化, 易操作的能快速生成模拟数据的再次按Mock服务."/>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <!-- 引入element-ui的css -->
    <link rel="stylesheet" th:href="@{/lib/element-ui/theme-chalk/index.css}">
    <!-- 引入public.css -->
    <link rel="stylesheet" th:href="@{/css/public.css}">
    <!-- 引入jsoneditor的css -->
    <link rel="stylesheet" type="text/css" th:href="@{/lib/jsoneditor/jsoneditor.min.css}">


    <!-- 引入vue和vue-i18n的js -->
    <script th:src="@{/lib/vue/vue.min.js}"></script>
    <script th:src="@{/lib/vue/vue-i18n.js}"></script>
    <!-- 引入axios和qs的js -->
    <script th:src="@{/lib/axios.min.js}"></script>
    <script th:src="@{/lib/qs.min.js}"></script>
    <!-- 引入element-ui的js -->
    <script th:src="@{/lib/element-ui/index.js}"></script>
    <!-- 引入clipboard的js -->
    <script th:src="@{/lib/clipboard.min.js}"></script>
    <!-- 引入jsoneditor的js -->
    <script th:src="@{/lib/jsoneditor/jsoneditor.min.js}"></script>
    <script th:src="@{/lib/jsoneditor/jsoneditor-minimalist.min.js}"></script>
    <!-- 引入公共js -->
    <script th:src="@{/js/public.js}"></script>

    <title>Mock平台</title>

    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }


        .right-bottom-btn {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 60px;
            height: 60px;
            line-height: 70px;
            text-align: center;
            color: #FFF;
            z-index: 999;
            background: #66B1FF;
            cursor: pointer;
            border-radius: 30px;
            box-shadow: 0px 0px 20px #000;
        }


        .app-container {
            padding: 0px 10px 10px 10px;
        }
        .searchDiv {
            margin-bottom: 15px;
        }
        .width1 {
            width: 220px;
            margin-right: 10px;
        }

        .pagination-container {
            padding: 10px 16px 16px 16px;
            float: left;
        }

        div.jsoneditor-menu a.jsoneditor-poweredBy {
            font-size: 8pt;
            position: absolute;
            right: 0;
            top: 0;
            display: none;
        }
    </style>
</head>

<body>
<div id="app" style="height: 100%;">
    <div>
        <el-row>
            <el-col :span="6" v-for="(item,index) in items"
                    style="margin-bottom:25px;position: relative;">

                <el-card style="width: 94%;margin-left: 3%" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold">{{item.projectName}}</span>
                        <el-button @click="toMockList(item)" style="float: right; padding: 3px 0" type="text">进入项目</el-button>
                    </div>
                    <div class="text item">
                        <span>描述：{{item.introduce}}</span>
                    </div>
                    <div class="text item">
                        <span>路径：{{item.path}}</span>
                    </div>
                    <div class="text">
                        <span>操作：</span>
                        <el-button-group>
                            <el-tooltip effect="light" content="复制项目地址" placement="bottom">
                                <el-button size="small" icon="el-icon-connection" @click="copy($event, item)"></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" content="编辑项目" placement="bottom">
                                <el-button size="small" icon="el-icon-edit" @click="updateProject(item)"></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除项目" placement="bottom">
                                <el-button size="small" icon="el-icon-delete" @click="deleteProject(item)"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </div>
                </el-card>

            </el-col>
        </el-row>
    </div>

    <!-- 右侧悬浮按钮 -->
    <div class="right-bottom-btn" @click="addProject">
        <i class="el-icon-plus" style="color: white; font-size: 30px; font-weight: bold"></i>
    </div>

    <!-- 添加或修改项目dialog框 -->
    <el-dialog :title="projectDialogTitle" :visible.sync="projectDialog" width="500px" append-to-body>
        <el-form ref="projectForm" :model="projectForm" :rules="projectFormRules" label-width="80px">
            <el-form-item label="项目ID" prop="projectId" v-if="!ifAddProject">
                <el-input v-model="projectForm.projectId" disabled/>
            </el-form-item>
            <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="projectForm.projectName" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="项目路径" prop="path">
                <el-input v-model="projectForm.path" placeholder="请输入项目路径" />
            </el-form-item>
            <el-form-item label="介绍" prop="introduce">
                <el-input v-model="projectForm.introduce" type="textarea" placeholder="请输入介绍" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitProjectForm">确 定</el-button>
            <el-button @click="cancelProjectForm">取 消</el-button>
        </div>
    </el-dialog>

    <!-- 弹出 dialog 接口列表-->
    <el-dialog title="接口列表" :visible.sync="mockListDialog" :fullscreen="true" :append-to-body="true">
        <div class="app-container">
            <div class="searchDiv">
                <el-form ref="mockListQueryForm" :inline="true" :model="queryParams" class="demo-form-inline">
                    <el-form-item label="接口名称">
                        <el-input type="text" placeholder="请输入接口名称" clearable v-model="queryParams.mockName"
                                  class="width1"></el-input>
                    </el-form-item>
                    <el-form-item label="url路径">
                        <el-input type="text" placeholder="请输入url路径" clearable v-model="queryParams.url"
                                  class="width1"></el-input>
                    </el-form-item>
                    <el-form-item label="接口类型">
                        <el-select v-model="queryParams.method" placeholde="请选择接口类型" clearable class="width1">
                            <el-option v-for="item in methodOptions" :label="item.label" :value="item.value"
                                       :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-button type="primary" icon="el-icon-search" @click="searchMockList()">搜索</el-button>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="danger" icon="el-icon-delete" @click="addMock()">新增</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="batchDeleteMock()">批量删除</el-button>
                    </el-col>
                </el-row>
            </div>

            <el-table :data="mockList" v-loading="loading" @selection-change="handleSelectionChange" stripe>
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        {{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="mockName" label="接口名称"></el-table-column>
                <el-table-column prop="url" label="url路径"></el-table-column>
                <el-table-column prop="method" label="请求类型" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.method | tagClass">
                            {{scope.row.method | methodText(methodTextDict)}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="introduce" label="简介"></el-table-column>
                <el-table-column prop="mockjsFlag" label="启用MockJs" width="200" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.mockjsFlag | tagClass2">
                            {{scope.row.mockjsFlag | mockjsFlagText(mockjsFlagTextDict)}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-tooltip effect="light" content="复制接口地址" placement="bottom">
                            <el-button type="info" icon="el-icon-document-copy" size="mini" @click="copyMockUrl($event, scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="light" content="修改" placement="bottom">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateMock(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="light" content="删除" placement="bottom">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMock(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination class="pagination-container" background
                    :current-page.sync="queryParams.pageNum"
                    :page-size.sync="queryParams.pageSize"
                    :page-sizes="[5,10,20,50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>


        <el-drawer
                title="新增接口"
                :visible.sync="mockDrawer"
                ref="mockDrawer"
                :append-to-body="true"
                size="70%">

                <el-row>
                    <el-col :span="9">
                        <el-form :model="mockForm" ref="mockForm" :rules="mockFormRules" label-width="120px">
                            <el-form-item label="接口名称" prop="mockName">
                                <el-input v-model="mockForm.mockName" autocomplete="off" class="width1"></el-input>
                            </el-form-item>
                            <el-form-item label="类型(method)" prop="method">
                                <el-select v-model="mockForm.method" class="width1">
                                    <el-option label="GET" value="GET"></el-option>
                                    <el-option label="POST" value="POST"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="接口地址" prop="url">
                                <el-input v-model="mockForm.url" autocomplete="off" class="width1"></el-input>
                            </el-form-item>
                            <el-form-item label="开启MockJs" prop="mockjsFlag">
                                <el-select v-model="mockForm.mockjsFlag" class="width1">
                                    <el-option label="不开启" value="0"></el-option>
                                    <el-option label="开启" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="接口介绍" prop="introduce">
                                <el-input v-model="mockForm.introduce" type="textarea" placeholder="请输入介绍" class="width1"/>
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <el-col :span="15">
                        <el-row>
                            <el-col :span="3">
                                <div style="margin-top: 8px">
                                    <span style="font-size: 14px;color: red">*</span>
                                    <span style="font-size: 14px;color: #606266">接口数据</span>
                                </div>
                            </el-col>
                            <el-col :span="21">
                                <div id="jsoneditor1" style="height: 305px;width: 98%;"></div>
                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>

            <div style="position: absolute; right: 10px; bottom: 10px;">
                <el-button @click="mockDrawer = false;drawerloading = false;">取 消</el-button>
                <el-button type="primary" @click="submitDrawer()" :loading="drawerloading">{{ drawerloading ? '保存中 ...' : '保 存' }}</el-button>
            </div>
        </el-drawer>

    </el-dialog>

</div>
</body>

<script type="text/javascript" th:inline="javascript">
    Util.ctx = /*[[@{/}]]*/'';

    new Vue({
        el: '#app',
        data: function () {
            const checkPath = (rule, value, callback) => {
                if (!!value) {
                    if (!value.startsWith('/')) {
                        callback(new Error('项目路径必须以/开头'))
                    }
                    const n = (value.split('/')).length - 1;
                    if (n > 1) {
                        callback(new Error('项目路径只能有一个/'))
                    } else {
                        callback()
                    }
                } else {
                    callback(new Error('项目路径不能为空'))
                }
            }

            return {
                activeIndex: 'myproject',
                // 项目列表
                items: [],
                projectDialogTitle: '',
                projectDialog: false,
                // 是否是新增
                ifAddProject: true,
                // 是否接口新增
                ifAddMock: true,
                // 项目表单数据
                projectForm: {},
                // 项目表单数据校验规则
                projectFormRules: {
                    projectId: [
                        { required: true, message: "项目ID不能为空", trigger: "blur" }
                    ],
                    projectName: [
                        { required: true, message: "项目名称不能为空", trigger: "blur" }
                    ],
                    path: [
                        { validator: checkPath, trigger: "blur" }
                    ]
                },
                // mock表单数据
                mockForm: {},
                // mock表单数据校验规则
                mockFormRules: {
                    method: [
                        { required: true, message: "类型(method)不能为空", trigger: "blur" }
                    ],
                    jsonData: [
                        { required: true, message: "接口数据不能为空", trigger: "blur" }
                    ],
                    url: [
                        { required: true, message: "接口地址不能为空", trigger: "blur" }
                    ],
                    mockName: [
                        { required: true, message: "接口名称不能为空", trigger: "blur" }
                    ],
                },
                // 控制mock列表的dialog的显示
                mockListDialog: false,
                // 控制新增修改Mock的Drawer的显示
                mockDrawer: false,
                // 当前选中的项目ID
                currentProjectId: '',
                // 查询mock列表遮罩层
                loading: false,
                // drawer保存时候的loading
                drawerloading: false,
                // mock表格数据
                mockList: [],
                // 多选的mock数据
                mockSelection: [],
                // mock表格总条数
                total: 0,
                // mock表格查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 5,
                    mockName: undefined,
                    url: undefined,
                    method: undefined
                },
                // mock表格字典值
                methodOptions: [
                    { label: 'GET', value: 'GET' },
                    { label: 'POST', value: 'POST' },
                ],
                methodTextDict: {
                    'GET': 'GET',
                    'POST': 'POST'
                },
                mockjsFlagTextDict: {
                    '0': '关闭',
                    '1': '开启'
                },
                editor1: undefined
            }
        },
        filters: {
            methodText(val, methodTextDict) {
                return methodTextDict[val];
            },
            mockjsFlagText(val, mockjsFlagTextDict) {
                return mockjsFlagTextDict[val];
            },
            tagClass(val) {
                if (val === undefined) {
                    return
                }
                if (val === 'POST') {
                    return 'success'
                } else if (val === 'GET') {
                    return 'info'
                }
            },
            tagClass2(val) {
                if (val === undefined) {
                    return
                }
                if (val === '1') {
                    return 'success'
                } else if (val === '0') {
                    return 'info'
                }
            },
        },
        methods: {
            // 获取项目列表
            getProjectList: function () {
                $axios({
                    method: 'get',
                    url: Util.ctx + "project/list"
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.items = res.data.data;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch((res) => {
                    console.log(res);
                })
            },
            // 重置项目表单
            resetProjectForm() {
                this.projectForm = {
                    projectId: undefined,
                    projectName: undefined,
                    path: undefined,
                    introduce: undefined,
                }
                this.resetForm("projectForm");
            },
            // 重置接口表单
            resetMockForm() {
                this.mockForm = {
                    method: "GET",
                    projectId: this.currentProjectId,
                    jsonData: undefined,
                    mockName: undefined,
                    url: undefined,
                    mockjsFlag: "0",
                    introduce: undefined,
                }
                this.resetForm("mockForm");
            },
            // 表单重置
            resetForm(refName) {
                if (this.$refs[refName]) {
                    this.$refs[refName].resetFields();
                }
            },
            // 新增或者修改项目的‘确认’按钮
            submitProjectForm() {
                this.$refs["projectForm"].validate(valid => {
                    if (valid) {
                        if (this.ifAddProject) {
                            $axios({
                                method: 'post',
                                url: Util.ctx + "project/add",
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                                },
                                data: this.projectForm
                            }).then((res) => {
                                if (res.data.code === 200) {
                                    this.projectDialog = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.getProjectList();
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            }).catch((res) => {
                                console.log(res);
                            })
                        } else {
                            $axios({
                                method: 'post',
                                url: Util.ctx + "project/update",
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                                },
                                data: this.projectForm
                            }).then((res) => {
                                if (res.data.code === 200) {
                                    this.projectDialog = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.getProjectList();
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            }).catch((res) => {
                                console.log(res);
                            })
                        }
                    }
                });
            },
            // 新增或者修改项目的‘取消’按钮
            cancelProjectForm() {
                this.projectDialog = false;
            },
            // 打开新增项目页面
            addProject() {
                this.resetProjectForm();
                this.projectDialogTitle = "新增项目";
                this.ifAddProject = true;
                this.projectDialog = true;
            },
            // 打开更新项目页面
            updateProject(item) {
                this.resetProjectForm();
                this.projectDialogTitle = "修改项目";
                this.ifAddProject = false;
                this.projectDialog = true;
                this.projectForm = {
                    projectId: item.projectId,
                    projectName: item.projectName,
                    path: item.path,
                    introduce: item.introduce,
                }
            },
            // 删除项目
            deleteProject(item) {
                this.$confirm('确定要删除该项目吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $axios({
                        method: 'get',
                        url: Util.ctx + "project/delete/" + item.projectId,
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getProjectList();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch((res) => {
                        console.log(res);
                    })
                }).catch(() => {

                });
            },
            // 打开接口列表页面，并且查询出接口列表
            toMockList(item) {
                this.currentProjectId = item.projectId;
                // 每次打开，重置查询条件
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 5,
                    url: undefined,
                    method: undefined
                };
                this.mockListDialog = true;
                this.searchMockList();
            },
            // 查询接口列表
            searchMockList() {
                this.queryParams.pageNum = 1;
                this.getMockList();
            },
            // 处理el-table分页
            handleSizeChange() {
                this.getMockList();
            },
            // 处理el-table分页
            handleCurrentChange() {
                this.getMockList();
            },
            // 处理el-table多选
            handleSelectionChange(val) {
                this.mockSelection = val;
                console.log(this.mockSelection);
            },
            // 获取接口列表axios请求
            getMockList() {
                this.loading = true;
                this.queryParams.projectId = this.currentProjectId;
                $axios({
                    method: 'post',
                    url: Util.ctx + "mock/list",
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    data: this.queryParams
                }).then((res) => {
                    this.loading = false;
                    if (res.data.code === 200) {
                        this.mockList = res.data.data.rows;
                        this.total = res.data.data.total;
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch((res) => {
                    this.loading = false;
                    console.log(res);
                })
            },
            // 打开新增接口页面
            addMock() {
                this.mockDrawer = true;
                this.ifAddMock = true;
                this.resetMockForm();

                if (!this.editor1) {
                    this.$nextTick(()=>{
                        let container1 = document.getElementById('jsoneditor1');
                        let optionsOutput1 = {
                            mode : 'code',
                            error : (err)=> {
                                this.$message.error('EF1 ->' + err.toString());
                            }
                        };
                        this.editor1 = new JSONEditor(container1, optionsOutput1, "");
                        this.editor1.setText(null);
                    })
                } else {
                    this.editor1.setMode("code");
                    this.editor1.setText(null);
                }
            },
            // 批量删除接口
            batchDeleteMock() {
                this.$confirm('确定要批量删除所有选中的接口吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let mockIds = [];
                    for (let item of this.mockSelection) {
                        mockIds.push(item.mockId);
                    }
                    $axios({
                        method: 'post',
                        url: Util.ctx + "mock/batchDelete",
                        headers: {
                            'Content-Type': 'application/json; charset=UTF-8'
                        },
                        data: mockIds
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.searchMockList();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch((res) => {
                        console.log(res);
                    })
                }).catch(() => {

                });
            },
            // 打开更新接口页面
            updateMock(row) {
                this.mockDrawer = true;
                this.ifAddMock = false;
                this.resetMockForm();
                this.mockForm.method = row.method;
                this.mockForm.mockjsFlag = row.mockjsFlag;
                this.mockForm.mockId = row.mockId;
                this.mockForm.mockName = row.mockName;
                this.mockForm.url = row.url;
                this.mockForm.introduce = row.introduce;
                this.mockForm.jsonData = row.jsonData;

                if (!this.editor1) {
                    this.$nextTick(()=>{
                        let container1 = document.getElementById('jsoneditor1');
                        let optionsOutput1 = {
                            mode : 'code',
                            error : (err)=> {
                                this.$message.error('EF1 ->' + err.toString());
                            }
                        };
                        this.editor1 = new JSONEditor(container1, optionsOutput1, "");
                        this.editor1.setMode("code");
                        this.editor1.setText(row.jsonData);
                    })
                } else {
                    this.editor1.setMode("code");
                    this.editor1.setText(row.jsonData);
                }
            },
            // 单个删除接口
            deleteMock(row) {
                this.$confirm('确定要删除该接口吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $axios({
                        method: 'get',
                        url: Util.ctx + "mock/delete/" + row.mockId,
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.searchMockList();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch((res) => {
                        console.log(res);
                    })
                }).catch(() => {

                });
            },
            // 确认提交接口新增或修改
            submitDrawer() {
                if (this.drawerloading) {
                    return;
                }
                this.$refs.mockForm.validate((valid) => {
                    if(valid) {
                        this.$confirm('确定要提交吗？')
                            .then(_ => {
                                this.drawerloading = true;
                                if (this.ifAddMock) {
                                    this.mockForm.jsonData = this.editor1.getText();
                                    $axios({
                                        method: 'post',
                                        url: Util.ctx + "mock/add",
                                        headers: {
                                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                                        },
                                        data: this.mockForm
                                    }).then((res) => {
                                        if (res.data.code === 200) {
                                            this.drawerloading = false;
                                            this.mockDrawer = false;
                                            this.$message({
                                                message: res.data.msg,
                                                type: 'success'
                                            });
                                            this.searchMockList();
                                        } else {
                                            this.$message.error(res.data.msg);
                                        }
                                    }).catch((res) => {
                                        console.log(res);
                                    })
                                } else {
                                    this.mockForm.jsonData = this.editor1.getText();
                                    $axios({
                                        method: 'post',
                                        url: Util.ctx + "mock/update",
                                        headers: {
                                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                                        },
                                        data: this.mockForm
                                    }).then((res) => {
                                        if (res.data.code === 200) {
                                            this.drawerloading = false;
                                            this.mockDrawer = false;
                                            this.$message({
                                                message: res.data.msg,
                                                type: 'success'
                                            });
                                            this.searchMockList();
                                        } else {
                                            this.$message.error(res.data.msg);
                                        }
                                    }).catch((res) => {
                                        console.log(res);
                                    })
                                }
                            }).catch(_ => {});
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            },
            // 复制接口地址
            copyMockUrl(event, row) {
                let path = "";
                for (let item of this.items) {
                    if (item.projectId === row.projectId) {
                        path = item.path;
                        break;
                    }
                }
                let text = this.getIpHost() + row.projectId + path + row.url;
                this.handleClipboard(text, event);
            },
            // 获取本机host
            getIpHost: function () {
                return 'http://' + window.location.host + '/api/';
            },
            // 复制到粘贴板
            copy: function (event, item) {
                let text = this.getIpHost() + item.projectId + item.path;
                this.handleClipboard(text, event);
            },
            // 复制到粘贴板
            handleClipboard(text, event) {
                const clipboard = new ClipboardJS(event.target, {
                    text: () => text
                });
                clipboard.on('success', () => {
                    this.clipboardSuccess(text);
                    clipboard.destroy();
                });
                clipboard.on('error', () => {
                    this.clipboardError();
                    clipboard.destroy();
                });
                clipboard.onClick(event);
            },
            clipboardSuccess(text) {
                this.$message({
                    message: '已复制到粘贴板',
                    type: 'success'
                });
            },
            clipboardError() {
                this.$message.error('Copy error');
            },
        },

        mounted: function () {
            this.getProjectList();
        }
    })

</script>

</html>